<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-l">
            <el-form-item label="姓名：">
                <el-input v-model="formInline.entity.user.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="formInline.entity.user.phone" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="formInline.entity.status" placeholder="全部">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="未审核" value="0"></el-option>
                    <el-option label="机构审核" value="1"></el-option>
                    <el-option label="协会审核" value="2"></el-option>
                    <el-option label="已缴费" value="3"></el-option>
                    <el-option label="已排场" value="4"></el-option>
                    <el-option label="已通过" value="5"></el-option>
                    <el-option label="未通过" value="6"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="examineeList">搜索</el-button>
                <el-button class="reset" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="export-less">
            <!-- <el-button type="primary" @click="onSubmit">Excel导入</el-button> -->
            <span class="jiafei">缴费总额：{{costNum}}元</span>
        </div>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="user.name" label="姓名"></el-table-column>
                <el-table-column prop="user.sex" label="性别" :formatter="sexFormatter"></el-table-column>
                <el-table-column prop="examinationRoom.name" label="考场号"></el-table-column>
                <el-table-column prop="subjects.chName" label="考试科目"></el-table-column>
                <el-table-column prop="vipLevel" label="会员等级" :formatter="sexVipLevel"></el-table-column>
                <el-table-column prop="user.certificate" label="身份证号"></el-table-column>
                <el-table-column prop="user.phone" label="手机号"></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column prop="paid" label="缴费金额"></el-table-column>
                <el-table-column label="操作">
                    <!-- confirm(scope.row) -->
                    <template slot-scope="scope">
                        <el-button  @click="detailData = scope.row,outerVisibleDetail = true" type="text" size="medium" class="button-my-test">详情</el-button>
                        <el-button v-if="scope.row.status == 1" @click="byOrderId(scope.row),outerVisible = true" type="text" size="medium" class="button-my-test">审核</el-button>
                        <el-button v-if="scope.row.status < 2" @click="dialogFormVisible = true,rejected.id = scope.row.id,pageInfo(),ruleForm.id = scope.row.id" type="text" size="medium" class="button-my-test">修改信息</el-button>
                        <el-button @click="byOrderId(scope.row),results = true,resultsFrom.id=scope.row.id" v-if="scope.row.status > 3 && new Date(nowTime) > new Date(scope.row.examination.examTime)" type="text" size="medium" class="button-my-test">修改成绩</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog title="驳回" class="rejected" :visible.sync="centerDialogVisible" width="30%" center>
            <el-form ref="form" :model="rejected" label-width="80px">
                <el-form-item label="请输入">
                    <el-input type="textarea" placeholder="驳回原因..." v-model="rejected.message"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="centerDialogVisible = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="centerDialogVisible = false,rejected.reject = false,orderAudit('驳回成功')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="审核" :visible.sync="outerVisible">
            <ul class="shenhe-ul" v-if="JSON.stringify(byOrderData) != '{}'">
                <li>考试科目：{{byOrderData.subjects.chName}}</li>
                <li>考试等级：{{byOrderData.subjectsLevel.name}}</li>
                <li>培训机构：{{byOrderData.organization.companyName}}</li>
                <li>中文名：{{byOrderData.chName}}</li>
                <li>英文名：{{byOrderData.enName}}</li>
                <li>姓拼音：{{byOrderData.pinyinFamilyName}}</li>
                <li>名拼音：{{byOrderData.pinyinName}}</li>
                <li>GPC编号：{{byOrderData.gpcCode}}</li>
                <li>GPC会员名：{{byOrderData.gpcName}}</li>
                <li>是否是GPC会员：{{byOrderData.gpcUser == 0 ? '不是' : '是'}}</li>
                <li>GPC会员等级：{{byOrderData.vipLevel | vipLevel}}</li>
            </ul>
            <div slot="footer" class="dialog-footer" v-if="JSON.stringify(byOrderData) != '{}'">
                <el-button @click="centerDialogVisible = true,outerVisible = false,rejected.reject = false,rejected.id = byOrderData.id">驳回</el-button>
                <el-button type="primary" @click="rejected.reject = true,rejected.id = byOrderData.id,orderAudit('审核通过'),centerDialogVisible = false">通过</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="ruleForm">
                <el-form-item label="考试科目:" label-width="80px">
                    <el-radio-group v-model="ruleForm.subjectsId">
                        <el-radio v-for="(item,index) in subjectArr" :key="index" :label="item.id" :value="item.id" @change="subjectsLevelPageList(item.id)">{{item.chName}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="考试等级:" label-width="80px" v-if="kmData.length > 0">
                    <el-radio-group v-model="ruleForm.subjectsLevelId">
                        <el-radio v-for="(item,index) in kmData" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="培训机构:" label-width="80px">
                    <el-select v-model="ruleForm.organizationId" placeholder="请选择">
                        <el-option v-for="(item,index) in pxList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,updateModificatios()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改成绩" :visible.sync="results" width="25%">
            <el-form :model="resultsFrom">
                <el-form-item label="修改成绩:" label-width="80px">
                    <el-input type="number" placeholder="" v-model="resultsFrom.grade"></el-input>
                </el-form-item>
                <el-form-item label="考试等级:" label-width="80px">
                    <el-radio-group v-model="resultsFrom.pass">
                        <el-radio label="true">通过</el-radio>
                        <el-radio label="false">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="results = false">取 消</el-button>
                <el-button type="primary" @click="results = false,updateResults()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="详情" :visible.sync="outerVisibleDetail">
            <ul class="shenhe-ul" v-if="JSON.stringify(detailData) != '{}'">
                <li>考试科目：{{detailData.subjects.chName}}</li>
                <li>考试等级：{{detailData.subjectsLevel.name}}</li>
            </ul>
            <ul class="shenhe-ul" v-if="JSON.stringify(detailData) != '{}'">
                <li>姓拼音：{{detailData.pinyinFamilyName}}</li>
                <li>名拼音：{{detailData.pinyinName}}</li>
                <li>中文名：{{detailData.chName}}</li>
                <li>英文名：{{detailData.enName}}</li>
                <li>培训机构：{{detailData.organization.companyName}}</li>
            </ul>
            <ul class="shenhe-ul" v-if="JSON.stringify(detailData) != '{}'">
                <li>是否GPC会员：{{detailData.gpcUser == 1 ? '是' : '否'}}</li>
                <li>GPC编号：{{detailData.gpcCode}}</li>
                <li>GPC会员等级：{{detailData.vipLevel | vipLevel}}</li>
                <li>GPC会员名：{{detailData.gpcName}}</li>
            </ul>
            <div slot="footer" class="dialog-footer" v-if="JSON.stringify(detailData) != '{}'">
                <el-button type="primary" @click="outerVisibleDetail = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            formInline: {
                entity:{
                    user:{
                        name:"",
                        phone:""
                    },
                    status:null
                },
                pageable:{
                    current:1,
                    size:10
                },
            },
            tableData:[],
            centerDialogVisible:false,
            outerVisible:false,
            dialogFormVisible:false,
            outerVisibleDetail:false,
            rejected:{
                id:'',
                reason:'',
                reject:false
            },
            total:0,
            byOrderData:{},
            detailData:{},
            ruleForm:{},
            subjectData: {
                conditions:[],
                pageable:{
                    current:1,
                    size:100
                },
            },
            subjectArr:[],
            kmPage:{
                conditions:[{
                    expression:'=',
                    column:'subjectsId',
                    value:''
                }],
                pageable:{
                    current:1,
                    size:100
                },
            },
            kmData:[],
            pxData: {
                conditions:[],
                pageable:{
                    current:1,
                    size:10
                },
            },
            pxList:[],
            nowTime:'',
            results:false,
            resultsFrom:{},
            costNum:0
        }
    },
    mounted(){
        this.examineeList()
        this.subjectList()
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;//js中是从0开始所以要加1
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        this.nowTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
        this.statTotal()
    },
    filters:{
        vipLevel(val){
            if(val == 0){
                return '普通会员'
            }else if(val == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        }
    },
    methods:{
        // 重置搜索内容
        reset(){
            this.formInline.entity.user.name = ''
            this.formInline.entity.user.phone = ''
            this.formInline.entity.status = null
            this.examineeList()
        },
        // 报名列表
        examineeList(){
            apiHttp.apiIndex.sigupPage2(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                }
            })
        },
        // 分页加载
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.examineeList()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.examineeList()
        },
        // 驳回+通过
        orderAudit(data){
            apiHttp.apiIndex.orderAudit(this.rejected).then(resp=>{
                if(resp.code == 0){
                    this.examineeList()
                    this.$message({
                        type: 'success',
                        message: data
                    })
                }
            })
        },
        // 获取单条信息
        byOrderId(data){
            this.byOrderData = data
        },
        // 性别过滤器
        sexFormatter(row){
            return row.user.sex == 0 ? '女' : '男'
        },
        // 会员过率器
        sexVipLevel(row){
            if(row.vipLevel == 0){
                return '普通会员'
            }else if(row.vipLevel == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        },
        // 状态过滤器
        statusFormatter(row){
            if(row.status == 0){
                return '未审核'
            }else if(row.status == 1){
                return '机构审核'
            }else if(row.status == 2){
                return '协会审核'
            }else if(row.status == 3){
                return '已缴费'
            }else if(row.status == 4){
                return '已排场'
            }else if(row.status == 5){
                return '已通过'
            }else if(row.status == 6){
                return '未通过'
            }
        },
        // 获取科目列表
        subjectList(){
            apiHttp.apiIndex.subjects(this.subjectData).then(resp=>{
                if(resp.code == 0){
                    this.subjectArr = resp.data.records
                }
            })
        },
        // 获取科目等级
        subjectsLevelPageList(id){
            this.kmPage.conditions[0].value = id
            apiHttp.apiIndex.subjectsLevelPage(this.kmPage).then(resp=>{
                if(resp.code == 0){
                    this.kmData = resp.data.records
                }
            })
        },
        // 培训机构列表
        pageInfo(){
            apiHttp.apiIndex.listSimple('').then(resp=>{
                if(resp.code == 0){
                    this.pxList = resp.data
                }
            })
        },
        // 修正信息
        updateModificatios(){
            apiHttp.apiIndex.xzModification(this.ruleForm).then(resp=>{
                if(resp.code == 0){
                    this.examineeList()
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    })
                }
            })
        },
        // 修改成绩
        updateResults(){
            apiHttp.apiIndex.orderUpdateGrade(this.resultsFrom).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    });
                    this.examineeList()
                }else{
                    this.$message({
                        showClose: true,
                        message: resp.message,
                        type: 'warning'
                    });
                }
                this.resultsFrom = {}
            })
        },
        // 缴费总额
        statTotal(){
            apiHttp.apiIndex.statamount(1).then(resp=>{
                if(resp.code == 0){
                    this.costNum = resp.data
                }
            })
        }
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .shenhe-ul{
        text-align: left;
        li{
            padding: 0 20px;
            line-height: 30px;
            color: #000;
            width: 28%;
            display: inline-block;
            img{
                width: 50px;
            }
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 10px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
    }
    .el-form-item__content{
        text-align: left;
    }
    .dialog-footer{
        text-align: center;
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

